<template>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="clickclose"
    >
        <slot></slot>
        <!-- 底部 -->
        <div slot="footer">
            <slot name="footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="$emit('confirm')">确 定</el-button>
            </slot>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name:"Dialog",
    data() {
        return {
            /**
             * 控制显示隐藏
             */
            dialogFormVisible: false,
            /**
             * loading
             */
            loading:false
        }
    },
    methods:{
        /**
         * 模态框隐藏
         */
        hide(){
            this.dialogFormVisible = false
        },
        /**
         * 模态框显示
         */
        show(){
            this.dialogFormVisible = true
        },
        /**
         * 开启 loading
         */
        start(){
            this.loading = true
        },
        /**
         * 关闭loading
         */
        stop(){
            this.loading = false
        }
    },
    props:{
        /**
         * 标题
         */
        title:String,
        /**
         * 点击 遮罩层的 显示隐藏
         */
        clickclose:Boolean,
    }
}
</script>

<style>

</style>